<template>
	<view class="container">
		<navbar :config="config" backColor="#000" @clickBtn="editorBtn"></navbar>
		<view class="topStatus" @click="editorBtn" :style="'top:'+stickyEdit+'rpx;right:'+stickyEdit+'rpx;'">
		<!-- {{editorStatus?'退出编辑':'编辑'}}
		 -->
		 <text v-if="shopList.length>0">{{bianji}}</text>
		 <text v-if="shopList.length==0">编辑</text>
		</view>
		<!-- 有数据 -->
		<!-- <view class="titleView" :style="'height:' + sticky + 'px;'+'line-height: ' + sticky + 'px;'">
			<view class="titleView-title">购物车</view>
			<view class="topStatus" @click="editorBtn">{{editorStatus?'退出编辑':'编辑'}}</view>
		</view> -->
		<view>
			<!-- v-if="shopList.length >0" -->

			<!-- 			<view class="topStatus u-flex-center-sb u-plr30" :style="{top:tabTop+'px'}">
				<text class="u-1A1A1A u-font30">共{{totalNum}}件商品</text>
			</view> -->
			<view class="carbox">
				<view class="shopList" v-for="(item,index) in shopList" :key="item.source_shop_id"
				>
					<view class="u-flex-center-sb" >
						<view class="u-flex-center" style="margin-top: 19rpx;margin-left: 19rpx;">
							<view class="check" @click.stop="shopChecked(index)">
								<!-- <text class="iconfont iconbox  " style="color:#FF211F;font-size: 16px;width: 16px;height: 16px;"
									v-if="item.flag">&#xe646;</text> -->
								<image v-if="item.flag" :src="imgUrl+'/shop/radioCheck.png'"
									style="width: 46rpx;height: 46rpx;" ></image>
								<!-- <view class="radios" v-else ></view> -->
								<image v-else :src="imgUrl+'/shop/radio.png'" style="width: 46rpx;height: 46rpx;">
								</image>
							</view>
							<!-- <text class="iconfont3 u-bold u-ml10" style="color: #3775F6;">&#xe655;</text> -->
							<text class=" u-font32  u-text1 name-width">{{item.source_shop_name}}</text>
							<text class=" right-icon iconfont u-font32 u-ml10"
								style="color:#333333 !important">&#xe6c7;</text>

						</view>
						<!-- <view class="">
							{{item.proxy?'代销商品':'自营商品'}}
						</view> -->

					</view>

					<view class="goodsItem u-border-one-one  u-flex-center" style="margin-top: 31rpx;"
						v-for="(children,childrenIndex) in item.user_cart_list" :key="children.id" @click="gotoDetails(children.goods_id)">
						<view class="check " @click.stop="goodsChecked(index,children.id)">
							<!-- <text class="iconfont iconbox  " style="color:#FF211F;font-size: 16px;"
								v-if="children.flag">&#xe646;</text>
							<view class="radios" v-else></view> -->

							<image v-if="children.flag" :src="imgUrl+'/shop/radioCheck.png'"
								style="width: 46rpx;height: 46rpx;"></image>
							<!-- <view class="radios" v-else ></view> -->
							<image v-else :src="imgUrl+'/shop/radio.png'" style="width: 46rpx;height: 46rpx;">
							</image>


						</view>
						<view class="positionRetave">
							<view class="positinAble" v-if="!children.goods_valid||!children.sku_valid">已失效</view>
							<image :src="children.goods_cover" class="imageView" mode="scaleToFill"></image>
						</view>
						<view class="u-flex1 right-box rightText u-ml30">
							<view class="storeView u-font32">
								<view class="tipsStatus" v-if="children.platform_store">自营</view>
								<view class="thirdTag" v-if="children.third">第三方</view>
								<text class="u-474747" style="font-size: 24rpx;">{{children.goods_title}}</text>

							</view>
							<view class="u-flex-column-start">
								<view class=" u-font32 u-flex1" style="color:#FF211F">
									<text class="specifications"
										v-if="children.sku_set_name">规格：{{children.sku_set_name}}</text>
								</view>
								<view class="u-flex-center-sb botPrice" style="align-items: center;">
									<rich-text :nodes="$mUtil.priceBigSmall(children.sale_price)"></rich-text>

									<view class="rightAddRes ">
										<!-- <view class="btnTagLeft" @click="resNum(children.id)">一</view> -->
										<!-- <u-icon name="minus" color="#BEBEBE" @click="resNum(children.id)"></u-icon> -->
										<image :src="imgUrl+'/shop/minus.png'" class="minus"
											@click="resNum(children.id)"></image>
										<text class="centertext">{{children.num}}</text>
										<!-- <view class="btnTagRight" @click="addNum(children.id)">十</view> -->
										<!-- <u-icon name="plus" color="#333333" @click="addNum(children.id)"></u-icon>
										 -->
										<image :src="imgUrl+'/shop/plus.png'" class="minus"
											@click="addNum(children.id)"></image>
									</view>
								</view>
							</view>
						</view>
					</view>

				</view>




				<view class="guess" :class="shopList.length==0 ? 'guessTop' : ''">
					<image :src="imgUrl+'/shop/maybeLike.png'" class="maybeLike"></image>
					<view class="guess-item" v-if="goodsList && goodsList.length > 0">
						<view class="item" @click="goProductDetails('/pages/product/goods/goods?id=' + item.id)"
							v-for="(item, index) in goodsList" :key="index">
							<image v-if="item && item.cover" :src="item.cover" mode="aspectFill"></image>
							<view style="padding-bottom: 23rpx">
								<view class="name" style="flex: 1">{{ item.title }}</view>
								<view class="number">
									<view class="number-red">
										<rich-text :nodes="$mUtil.priceBigSmall(item.min_sale_price)"></rich-text>
									</view>
									<view class="number-grey">￥{{ item.max_market_price }}</view>
								</view>

							</view>
						</view>
					</view>
					<nodata v-if="!goodsList" :config="{ top: 1, content: '暂无商品~' }"></nodata>
					<loadMore v-if="goodsList.length > 0" :status="status"></loadMore>
				</view>

			</view>

			<!-- 底部 -->

			<view v-if="ispay" class="botfixed u-flex-center-sb" v-show="shopList.length>0">
				<view class="leftAll u-flex-center"
				 
				 @click="allChecked">
					<view class="check ">
						<!-- 	<text class="iconfont iconbox u-font66" style="color:#FF211F"
							v-if="checkAggrement">&#xe646;</text>
						<view class="radios" v-else></view> -->

						<image v-if="checkAggrement" :src="imgUrl+'/shop/radioCheck.png'"
							style="width: 46rpx;height: 46rpx;"></image>
						<!-- <view class="radios" v-else ></view> -->
						<image v-else :src="imgUrl+'/shop/radio.png'" style="width: 46rpx;height: 46rpx;">
						</image>



					</view>
					<text class="u-ml5 u-font24 u-474747" style="margin-right: 12rpx;width: 50rpx;">全选</text>
					<!-- <text class="u-ml5 u-font30 u-AAAAAA">{{checkAggrement?'反选':'全选'}}</text> -->
					 <!-- v-if="editorStatus" -->
					<view class="u-flex-center">
						<view class="yixuanView">
							<view class="u-font24 u-474747" style="margin-bottom: 6rpx;">已选{{checkNum}}件，</view>
							<view class="u-font24 u-474747 yixuanViewHeji" >合计：
								<view style="color:#FF211F;font-weight: bold;">
									<rich-text :nodes="$mUtil.priceBigSmall(totalPrice)"></rich-text>
								</view>
							</view>
						</view>

					</view>
				</view>
				<view class="rightP u-flex-center">
					<!-- v-if="!editorStatus" -->
					<view class="u-btn btnWidth u-ml10" @click="surePay">去结算</view>
					<view v-if="editorStatus" class="u-btn btnWidth u-ml10" @click="delCart">删除</view>
				</view>
			</view>
		</view>

		<!-- 没有数据 -->
		<view class="nogoods u-mt30 u-flex-column-center" v-if="shopList.length==0">
			<image :src="noGoods" mode="" class="noImg"></image>
			<text class="u-font26 u-AAAAAA">暂无商品~</text>
			<view class="btnview" @click="gotoshop">
				<button class="goShopping">{{isLogin?'去逛逛':'去登录'}}</button>
			</view>
		</view>

		<!--页面加载动画-->
		<ldLoading isFullScreen :active="loading"></ldLoading>
	</view>
</template>

<script>
	var app = getApp()
	export default {
		data() {
			return {
				//手机状态栏高度
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				sticky: uni.getSystemInfoSync().statusBarHeight + 44,
				stickyEdit:uni.getSystemInfoSync().statusBarHeight + 20,
				imgUrl: this.$mConfig.staticUrl,
				goodsList: [], //猜你喜欢
				totalPrice: 0,
				totalNum: 0,
				checkNum: 0,
				checkAggrement: false,
				noGoods: this.$mAssetsPath.noGoods,
				config: {
					back: false, //false是tolbar页面 是则不写
					title: '购物车',
					color: '#000',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#fff"],
					statusBarFontColor: '#1A1A1A',
					backIconColor: "#000",
				},
				loading: false,
				shopList: [],
				arrLenid: [], //选中的购物车id
				editorStatus: false,
				isLogin: false,
				tabTop: 0,
				ispay: app.globalData.openPay,
				page: 1,
				keyWord: "",
				bianji:'编辑'
			}
		},
		onShow() {
			let shop = uni.getStorageSync('shop')
			if (shop) {
				this.shop = shop
				this.shopId = shop.id
				this.cartList(shop.id)
				
				this.rest()
			}
			let token = uni.getStorageSync('token')
			if (token) {
				this.isLogin = true
			} else {
				this.isLogin = false
			}
			this.page = 1;
			this.guessLike();
		},
		onPullDownRefresh() {
			this.page = 1;
			this.guessLike();
		},
		onReachBottom() {
			if (this.status == "more") {
				this.guessLike();
				this.page++;
			}
			// this.status = "loading";
		},
		onLoad() {
			this.tabTop = app.globalData.barHeight + 44;
		},
		methods: {
			gotoDetails(id){
				console.log("id",id)
				uni.navigateTo({
					url: '/pages/product/goods/goods?id=' + id,
				});
			},
			/**猜你喜欢 */
			guessLike() {
				this.keyWord = uni.getStorageSync("history") ?
					uni.getStorageSync("history").join(",") :
					"";
				this.$http
					.get(
						`/goods/smart`, {
							page: this.page,
							limit: 6,
							keywords: this.keyWord,
						},
						false
					)
					.then((res) => {
						if (res && res.code == 200) {
							this.goodsList =
								this.page == 1 ?
								res.page.list :
								this.goodsList.concat(res.page.list);
							console.log("this.goodsList", this.goodsList)
							console.log("res.page.list", res.page.list)

							if (res.page.totalPage <= res.page.currPage) {
								this.status = "noMore";
							} else {
								this.status = "more";
							}
						}
					});
			},
			gotoshop() {
				if (this.isLogin) {
					uni.switchTab({
						url: '/pages/index/lidaPage'
					})
				} else {
					uni.navigateTo({
						url: '/pages/research/register/login'
					})
				}
			},
			//选择店铺
			shopChecked(index) {
				this.shopList[index].flag = !this.shopList[index].flag
				this.shopList[index].user_cart_list.forEach(j => {
					if (this.shopList[index].flag) {
						j.flag = true
					} else {
						j.flag = false
					}
				})
				this.checkTotalNum()
			},
			//选择商品
			goodsChecked(index, id) {
				this.shopList[index].user_cart_list.forEach(j => {
					if (j.id == id) {
						j.flag = !j.flag
					}
				})
				this.shopHeightLaign(index)
				this.checkTotalNum()
			},
			//全选
			allChecked() {
				this.checkAggrement = !this.checkAggrement
				this.shopList.forEach(k => {
					k.flag = this.checkAggrement
					k.user_cart_list.forEach(j => {
						j.flag = this.checkAggrement
					})
				})
				this.checkTotalNum()
			},
			//减
			resNum(id) {
				this.shopList.forEach(k => {
					k.user_cart_list.forEach(j => {
						if (j.id == id) {
							if (j.num > 1) {
								j.num--
							} else {
								this.$mUtil.toast('不能再减了~')
							}
						}
					})
				})
				this.checkTotalNum()
			},
			//加
			addNum(id) {
				this.shopList.forEach(k => {
					k.user_cart_list.forEach(j => {
						if (j.id == id) {
							if (j.num >= j.limit_buy_num && j.limit_buy_num > 0) {
								this.$mUtil.toast('商品库存只有' + j.limit_buy_num + '件')
							} else {
								j.num++
							}

						}
					})
				})
				this.checkTotalNum()
			},
			//编辑
			editorBtn() {
					
					if(this.bianji=="编辑"){
						this.bianji="退出编辑"
						this.editorStatus = !this.editorStatus
					}else{
						this.bianji="编辑"
						this.editorStatus = !this.editorStatus
					}
				
			},
			//计算选中的数量和总价
			checkTotalNum() {
				this.checkNum = 0
				let arrLenid = []
				let total = 0
				this.shopList.forEach(k => {
					k.user_cart_list.forEach(j => {
						if (j.flag) {
							arrLenid.push(j.id)
							total += j.sale_price * j.num
						}

					})
				})
				this.totalPrice = total.toFixed(2)
				this.arrLenid = arrLenid
				this.checkNum = arrLenid.length
				if (this.checkNum == this.totalNum) {
					this.checkAggrement = true
				} else {
					this.checkAggrement = false
				}
			},
			//查询当前店铺的商品是否被全选中
			shopHeightLaign(index) {
				let arr = []
				this.shopList[index].user_cart_list.forEach(j => {
					arr.push(j.flag)

				})
				if (arr.indexOf(false) == -1) {
					this.shopList[index].flag = true
				} else {
					this.shopList[index].flag = false
				}
			},
			// 判断结算数组是否存在混合商品
			getIsHaveOnline() {
				return new Promise((resolve, reject) => {
					let arr = []
					for (let item of this.shopList) {
						for (let el of item.user_cart_list) {
							for (let i of this.arrLenid) {
								if (i == el.id) {
									arr.push(el.third)
								}
							}
						}
					}
					let value = arr.every((item) => {
						return item == arr[0];
					})
					resolve(value)
				})
			},
			//结算
			async surePay() {
				if (this.arrLenid.length > 0) {
					let isBoolean = await this.getIsHaveOnline()
					if (!isBoolean) return this.$mUtil.toast('本地商品与第三方商品不能混合购买')
					let flagKeys = []
					this.shopList.map((res, i) => {
						res.user_cart_list.map((keys, j) => {
							if (keys.flag) {
								if (!keys.goods_valid || (!keys.sku_valid)) {
									flagKeys.push('false')

								} else {
									flagKeys.push('true')
								}

							}

						})

					})
					if (flagKeys.indexOf('false') == -1) {
						this.psotJson()
					} else {
						this.$mUtil.toast('已失效的商品不能结算')
					}

				} else {
					this.$mUtil.toast('请选择需要购买的商品')
				}

			},
			//删除
			delCart() {
				let that = this
				if (that.arrLenid.length > 0) {
					uni.showModal({
						title: '提示',
						content: '确定删除选中的商品？',
						cancelColor: '#474747',
						confirmColor: '#FF721B',
						success: function(e) {
							if (e.confirm) {
								that.$http.delete(`/cart/delete`, that.arrLenid)
									.then(res => {
										if (res && res.code == 200) {
											that.$mUtil.toast('删除成功')
											that.rest()
											that.cartList(that.shopId)
											if(	that.shopList.length==0){
												that.editorStatus=true
												
											}
											
											
										}
									})
									
									
							}
							
						}
					});

				} else {
					that.$mUtil.toast('请选择需要删除的商品')
				}

			},
			// 重置状态
			rest() {
				this.arrLenid = []
				this.totalPrice = 0
				this.checkNum = 0
				this.checkAggrement = false
			},
			//列表
			cartList(id) {
				let nums = 0
				this.$http.get(`/cart/list/${id}`)
					.then(res => {
						this.loading = false
						if (res && res.code == 200) {
							if (res.list.length > 0) {
								res.list.forEach(k => {
									k.flag = false
									nums += k.user_cart_list.length
									k.user_cart_list.forEach(j => {
										j.flag = false
									})
								})
								this.totalNum = nums
								this.shopList = res.list
							} else {
								this.shopList = []
								that.bianji="编辑"
							}

						}
					})
			},
			
			goProductDetails(id) {
				uni.navigateTo({
					url: this.isActive == 0 ? '/pages/product/goods/serviceGood?id=' + id :
						'/pages/product/goods/goods?id=' + id,
				});
			},
			psotJson() {
				let shop_orders = []
				let parendArr = []
				let childArr = [
					[],
					[],
					[],
					[],
					[],
					[],
					[],
					[],
					[]
				]
				let listArr = []
				let dataJson = {}
				this.shopList.map((res, i) => {

					res.user_cart_list.map((keys, j) => {
						if (keys.flag) {
							childArr[i].push({
								user_cart_id: keys.id,
								activity_goods_id: '0',
								goods_id: keys.goods_id,
								num: keys.num,
								sku_hash_code: keys.sku_hash_code,
							})
						}

					})
					if (childArr[i].length > 0) {
						parendArr.push({
							shop_id: res.shop_id,
							source_shop_id: res.source_shop_id,
							activity_id: 0, //活动id
							sponsor_activity_id: 0, //拼团id
							user_remark: '',
							items: childArr[i]
						})

					}
				})
				dataJson = {
					is_cart: true, //是否来源于购物车
					receipt_id: null,
					shipment_mode: 0, //0物流，1自提
					shop_orders: parendArr,
					marketing_type: 0, //0无活动，1秒杀，2拼团
				}
				uni.setStorageSync('dataJson', dataJson)
				uni.navigateTo({
					url: '../product/surePay/surePay'
				})
				// let shop = uni.getStorageSync('shop')
				// let shopid=shop.id?shop.id:''
				// this.$http.post(`/order/build`,dataJson).then(res=>{
				// 	if(res&&res.code==200){
				// 		uni.setStorageSync('sureData',res.data)

				// 	}
				// })


			},

		}
	}
</script>

<style lang="scss">
	// page {
	//   background-color: #f5f5f5;
	// }

	.hx-navbar {
		// /deep/ .hx-navbar__content {
		// 	// background-color: #FF721B !important;

		// 	.hx_text_overflow {
		// 		color: #fff !important;
		// 	}
		// }
	}

	.shop-btn {
		width: 300rpx;
		height: 86rpx;
		background: #FF721B;
		border-radius: 43rpx;
		font-size: 30rpx;
		color: #fff;
		text-align: center;
		line-height: 86rpx;
		margin-top: 30rpx;
	}

	.right-icon {
		font-size: 25rpx;
	}

	.border {
		border-bottom: 3rpx solid #E7E7E7;
	}

	.right-box {
		display: flex;
		flex-direction: column;
		// align-items: flex-start;
		justify-content: space-between;
	}

	.name-width {
		max-width: 420rpx;
		font-weight: 400;
		font-size: 27rpx;
		color: #333333 !important;
		margin-left: 19rpx;
	}

	.positionRetave {
		position: relative;

		.positinAble {
			position: absolute;
			width: 200rpx;
			height: 40rpx;
			text-align: center;
			background-color: rgba($color: #000000, $alpha: .5);
			color: #fff;
			font-size: 26rpx;
			line-height: 40rpx;
			bottom: 0;
			left: 0;
		}
	}

	.tipsStatus {
		display: inline-block;
		padding: 0 20rpx;
		height: 22px;
		background: #FF211F;
		border-radius: 10rpx;
		line-height: 44rpx;
		text-align: center;
		margin-right: 10rpx;
		color: #fff;
		font-size: 24rpx;
	}

	.thirdTag {
		display: inline-block;
		padding: 0 10px;
		height: 22px;
		background: #30b885;
		border-radius: 5px;
		line-height: 22px;
		text-align: center;
		margin-right: 5px;
		color: #fff;
		font-size: 24rpx;
	}

	.check {
		position: relative;
		width: 46rpx;
		height: 46rpx;

		.radios {
			width: 16px;
			height: 16px;
			display: block;
			border: 1px solid #ccc;
			border-radius: 50%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;
		}

		.iconbox {
			position: relative;
			z-index: 2;
		}

	}

	.topStatus {
		width: 20%;
		z-index: 999;
		box-sizing: border-box;
		height: 80rpx;
		position: fixed;
		line-height: 80rpx;
		// top:0;
		
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.goodsItem {
		padding-left: 26rpx;
		padding-right: 19rpx;
		border-bottom: 3rpx solid #E7E7E7;
		margin-top: 31rpx;
		padding-bottom: 19rpx;
		margin-bottom: 19rpx;
	}

	// .goodsItem:last-child {
	// 	border-bottom: none;
	// }

	.noImg {
		width: 490rpx;
		height: 556rpx;
	}

	.btnview {
		// width: 300rpx;
		// margin: 30rpx auto 0;
	}

	.carbox {
		// padding: 20rpx 0 160rpx 0;
		margin-left: 19rpx;
		margin-top: 20rpx;

		.shopList {
			width: 712rpx;
			background: #FFFFFF;
			border-radius: 19rpx 19rpx 19rpx 19rpx;
		}
	}

	.rightText {
		// justify-content: space-between;
		// height: 200rpx;
	}

	.bottext,
	.botPrice {
		width: 100%;
	}

	.botPrice {
		// margin-top: 42rpx;
		font-weight: 600;
		font-size: 38rpx;
		color: #FF211F;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 35rpx;
		margin-top: 42rpx;
		// height: 100rpx;
	}

	.bottext {
		margin-top: 36rpx;
	}



	.btnWidth {
		width: 165rpx;
		height: 62rpx;
		background: #FF211F;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		font-weight: 400;
		font-size: 27rpx;
		color: #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.botfixed {
		position: fixed;
		bottom: 0rpx;
		// bottom:100rpx;
		left: 0;
		z-index: 9;
		padding: 0 30rpx;
		box-sizing: border-box;
		width: 750rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.imageView {
		width: 212rpx;
		height: 212rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin-left: 19rpx;
	}

	.storeView {
		font-family: MiSans, MiSans;
		font-weight: 500;
		font-size: 27rpx;
		color: #333333;
		line-height: 38rpx;
		text-align: justified;
		font-style: normal;
		text-transform: none;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 19rpx;

	}

	.u-flex-center-sb {
		// padding-top: 19rpx;
		// padding-left: 19rpx;
	}

	.specifications {
		width: auto;
		height: auto;
		background: #F7F7F7;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-weight: 400;
		font-size: 23rpx;
		color: #999999;
		padding: 5rpx 15rpx;


	}

	.uni-page-body {
		font-weight: 600;
		font-size: 38rpx;
		color: #FF211F;
	}

	.rightAddRes {
		width: 133rpx;
		// height: 27rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 35rpx;
		// border-radius: 8rpx;
		// border: 1px solid #E5E5E5;

		.centertext {
			line-height: 26px;
			text-align: center;
			// border: 1px solid #dedede;
			font-weight: 600;
			font-size: 26rpx;
			color: #333333;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			// width: 100rpx;
			// height: 52rpx;
			width: 56rpx;
			height: 35rpx;
			background: #F7F7F7;
			border-radius: 8rpx 8rpx 8rpx 8rpx;



		}

		.btnTagLeft {
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			color: #BEBEBE;
			font-size: 60rpx;
		}

		.btnTagRight {
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			font-size: 60rpx;
			color: #333333;
			background-color: #fff;
		}
	}

	.guess {
		// margin: 0 19rpx;

		.guess-item {
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			width: 711rpx;
			height: auto;

			// width: 711rpx;
			.item {
				margin-bottom: 36rpx;
				// background-color: #ffffff;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				width: 346rpx;
				height: 508rpx;
				background: #FFFFFF;
				border-radius: 19rpx 19rpx 19rpx 19rpx;

				image {
					width: 346rpx;
					height: 336rpx;
					// border-radius: 18rpx;
				}

				.name {
					margin: 6rpx;
					width: 318rpx;
					// height: 78rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					word-wrap: break-word;
					word-break: break-all;
					white-space: normal !important;
					color: #474747;

					font-weight: 400;
					font-size: 27rpx;
					color: #333333;
					line-height: 38rpx;
					margin-top: 11rpx;


				}

				.tag-box {
					margin: 10rpx 20rpx 0 20rpx;

					.tag1 {
						width: 69rpx;
						height: 30rpx;
					}

					.tag2 {
						width: 116rpx;
						height: 30rpx;
						margin-left: 10rpx;
					}
				}

				.number {
					display: flex;
					align-items: center;
					// padding-bottom: 40rpx;
					// margin: 0 20rpx 0 20rpx;
					margin: 30rpx 0 0 0;

					.number-red {
						font-weight: bold;
						font-size: 27rpx;
						color: #FF211F;
						line-height: 27rpx;
						margin-right: 6rpx;

						text {
							font-weight: 400;
							font-size: 23rpx;
							color: #BCBCBC;
						}
					}

					.number-grey {

						font-weight: 400;
						font-size: 23rpx;
						color: #BCBCBC;
						line-height: 17rpx;



					}
				}
			}
		}

		.guess-top {
			display: flex;
			align-items: center;
			margin-bottom: 28rpx;

			.guess-left {
				font-size: 36rpx;
				color: #474747;
				font-weight: Bold;
				line-height: 30rpx;
			}

			.guess-line {
				width: 1rpx;
				height: 32rpx;
				background-color: #9e9e9e;
				margin: 0 16rpx;
			}

			.guess-right {
				font-size: 24rpx;
				color: #474747;
				font-weight: Regular;
				line-height: 24rpx;
			}
		}
	}

	.hot-top {
		display: flex;
		align-items: flex-end;

		.hot-left {
			font-weight: 600;
			font-size: 31rpx;
			color: #333333;
			line-height: 31rpx;
			letter-spacing: 4rpx;
		}

		.hot-body {
			width: 1rpx;
			height: 32rpx;
			background-color: #9e9e9e;
			margin: 0 16rpx 0 14rpx;
		}

		.hot-right {
			font-weight: 400;
			font-size: 23rpx;
			color: #A5A5A5;
			line-height: 21rpx;
			margin-left: 19rpx;
			letter-spacing: 2rpx;
		}
	}

	.maybeLike {
		width: 281rpx;
		height: 31rpx;
		margin: 0 auto;
		margin-top: 38rpx;
		margin-left: 215rpx;
		margin-bottom: 19rpx;
	}

	.goShopping {
		background-color: #FF211F;
		color: #fff;
		margin-top: 10px;
		padding: 2px 40px;
	}

	.titleView {

		padding-left: 19rpx;
		padding-right: 19rpx;
		background-color: #fff;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1000;
		margin-bottom: 31rpx;
	}

	.titleView-title {
		font-weight: 600;
		font-size: 65rpx;
		color: #333333;
		line-height: 65rpx;
	}

	.minus {
		width: 28rpx;
		height: 28rpx;
	}

	.guessTop {
		margin-top: 81rpx;
	}

	.yixuanView {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		width: 240rpx;
	}
	.yixuanViewHeji{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
	}
</style>